<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label=" " prop="echelon">
        <el-select
          v-model="queryParams.echelon"
          placeholder="梯队筛选"
          clearable
          size="small"
          style="width: 160px"
          @change="handleQuery('name')"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label=" " prop="training_status_6">
        <el-select
          @change="handleQuery('name')"
          v-model="queryParams.training_status_6"
          placeholder="状态筛选"
          clearable
          size="small"
          style="width: 160px"
        >
          <el-option
            v-for="dict in statusIlls"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-input
        v-model="queryParams.name"
        placeholder="请输入运动员名称"
        clearable
        size="small"
        style="width: 160px;margin-left:57px;"
      />
      <el-row class="btn">
        <el-button type="primary" class="icon-cire" @click="handleQuery('name')">查询</el-button>
        <el-button type="primary" class="newill" @click="harderClick('')">
          <i class="el-icon-plus"></i>
          <span>新增运动员</span>
        </el-button>
      </el-row>
    </el-form>
    <el-table v-loading="loading" :data="typeList">
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="运动员" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="梯队" align="center" prop="echelon" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <el-tag effect="dark" type="success" size="mini" v-if="scope.row.sex==1">女</el-tag>
          <el-tag effect="dark" type="primary" size="mini" v-if="scope.row.sex==0">男</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="age" :show-overflow-tooltip="true" />
      <el-table-column label="级别" align="center" prop="level"></el-table-column>
      <el-table-column label="输送单位" align="center" prop="conveyingUnit"></el-table-column>
      <el-table-column label="训练年限" align="center" prop="trainingTime"></el-table-column>
      <el-table-column label="当前状态" align="center" prop="status" width="180">
        <template slot-scope="scope">
          <template v-for="item in statusIlls">
            <el-tag
              effect="dark"
              type="success"
              v-if="scope.row.status==item.dictValue"
              :key="item.dictValue"
            >{{item.dictLabel}}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <!-- slot-scope等于的这个值就是表格一行的数据,也就是数组中一行的数据{row}是解构的方式直接获取 -->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="harderClick(scope.row)"
            v-hasPermi="['system:dict:edit']"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleEditTable(scope.row)"
            v-hasPermi="['system:dict:remove']"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-custom"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:dict:remove']"
          >pk</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @pagination="getList"
      :current-page="queryParams.pageNum"
      :page-sizes="[1,5,10,20]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog
      :title="rowData?'编辑运动员':'新增运动员'"
      :visible.sync="open"
      width="1141px"
      :before-close="beforeClose"
    >
      <Popup ref="addEdit" @getMsgFormSon="msgFormSon" :rowData="rowData" :clickType="clickType" />
    </el-dialog>
  </div>
</template>
<script>
import {
  list,
  delLogininfor,
  cleanLogininfor,
  exportLogininfor,
  addUser1,
  addPhysical2,
  updateUser1,
  updatePhysical2,
  proportiontatals,
} from "@/api/monitor/logininfor";
import AchivementCard from "@/views/components/AchivementCard";
import Popup from "./dashboard/elDialog/Popup";
export default {
  name: "Logininfor",
  components: { AchivementCard, Popup },
  data() {
    return {
      curIndex: 0, // 默认选中第一个
      clickType: "",
      cardData: [
        {
          model: "M2X",
          distance: "（2000米）",
          num: "(6: 31, 12)",
          color: "#019CFF",
          children: [{ rank: 1, name: "张三" }],
        },
        {
          model: "M2X",
          distance: "（2000米）",
          num: "(6: 31, 12)",
          color: "#42DEBB",
          children: [
            { rank: 1, name: "张三" },
            { rank: 1, name: "张三" },
            { rank: 2, name: "张三" },
            { rank: 3, name: "张三" },
          ],
        },
        {
          model: "M2X666",
          distance: "（2600米）",
          num: "(6: 31, 12)",
          color: "#F4A522",
          children: [
            { rank: 1, name: "张三" },
            { rank: 1, name: "张三" },
            { rank: 2, name: "张三" },
            { rank: 3, name: "张三" },
          ],
        },
        {
          model: "M2X77",
          distance: "（2900米）",
          num: "(6: 31, 12)",
          color: "#7DD220",
          children: [
            { rank: 1, name: "张三" },
            { rank: 2, name: "张三" },
            { rank: 3, name: "张三" },
          ],
        },
      ],
      textarea: "",
      mychart: {},
      statusIlls: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 状态数据字典
      statusOptions: [],
      //   弹出框
      open: false,
      Look: false,
      input: "",
      formInline: {
        user: "",
        region: "",
      },
      value1: {},
      typeList: [{}],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        ipaddr: undefined,
        userName: undefined,
        status: undefined,
      },
      rules: {
        name: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
        ],
        sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
        nickName: [
          { required: true, message: "用户性别不能为空", trigger: "blur" },
        ],
        birthday: [
          { required: true, message: "归属年龄不能为空", trigger: "blur" },
        ],
        echelon: [
          { required: true, message: "用户梯队不能为空", trigger: "blur" },
        ],
      },
      // 表格行数据
      rowData: "",
    };
  },
  created() {
    this.getList();
    this.GetListing("echelon").then((res) => {
      this.statusOptions = res.data;
      this.GetListing("training_status_6").then((res) => {
        this.statusIlls = res.data;
      });
    });
  },
  watch: {},
  methods: {
    beforeClose(done) {
      this.$confirm("确认关闭？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
              this.open = false;
            }).catch(() => {
      });
      // this.open = false;
      this.$refs.addEdit.$refs.firstForm.resetFields();
    },
    suibian(data) {},
    msgFormSon(data) {
      this.open = false;
    },
    clickBadge(num) {
      if (this.curIndex != num) {
        //加个判断避免重复点击一个
        this.curIndex = num;
      }
    },

    /** 查询分页岗位列表 */
    getList() {
      this.loading = true;
      list(this.queryParams, this.dateRange).then((res) => {
        this.typeList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 弹框 (row=null代表新增,传个占位符, row有数据代表点击表格的编辑)
    harderClick(row) {
      console.log(row);
      this.rowData = "";
      this.$nextTick(() => {
        this.rowData = row;
      });

      this.open = true;
    },
    // 查看按钮
    handleEditTable(id) {
      this.$router.push({
        path: "/gen/edlooks",
        query: {
          id: id.id,
        },
      });
    },
    /** PK按钮操作 */
    handleDelete() {
      this.$router.push({
        path: "/gen/match",
        //  query: {
        //     id: id.id,
        //   },
      });
    },
    // 登录状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    /** 搜索按钮操作 */
    handleQuery(name) {
      if (name == "name") {
        this.queryParams.pageNum = 1;
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.infoId);
      this.multiple = !selection.length;
    },

    /** 清空按钮操作 */
    handleClean() {
      this.$confirm("是否确认清空所有登录日志数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return cleanLogininfor();
        })
        .then(() => {
          this.getList();
          this.msgSuccess("清空成功");
        })
        .catch(function () {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有操作日志数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportLogininfor(queryParams);
        })
        .then((res) => {
          this.download(res.msg);
        })
        .catch(function () {});
    },

    // 提交按钮
    submitForm(flag) {
      let arr = [];
      this.$refs.TwoForm.validate((valid) => {
        arr.push(valid);
      });

      this.$refs.firstForm.validate((valid) => {
        arr.push(valid);
      });

      if (arr.length == 2) {
        if (flag === "edit") {
          // 修改updateUser1
          Promise.all([updateUser1(this.form), updatePhysical2(this.formtable)])
            .then((res) => {
              console.log(res);
            })
            .catch((err) => {});
        } else if (flag === "add") {
          Promise.all([addUser1(this.form), addPhysical2(this.formtable)])
            .then((res) => {
              console.log(res);
              console.log(1);
            })
            .catch((err) => {});
        }
      }
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.btn {
  display: inline-block;
  margin-left: 20px;
}
.el-col-24 {
  background: #008080;
  font-size: 16px;
  color: #fff;
  padding-left: 20px;
  margin-bottom: 20px;
}
.pagination {
  float: right;
}
.textarea {
  width: 580px;
}
.app-container {
  padding: 32px;
  background-color: #f0f2f5;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 1280px;
}
body {
  width: 100%;
  height: 100%;
}
body {
  min-height: 1280px;
}
.el-row .button1 {
  margin-left: -63px;
}
.el-row .button2 {
  margin-left: 46px;
}
#chartLineBox {
  margin-left: 41px;
  margin-top: 32px;
}
.cards {
  display: flex;
}
.card-item {
  width: 160px;
  height: 240px;
  margin-right: 20px;
}
.card-item:last-child {
  margin-right: 0;
}
.el-row p {
  text-align: left;
  padding-left: 20px;
}
.breadcard {
  margin-top: 70px;
}
.tableColumn {
  padding-top: 20px;
}
.Partner {
  padding-left: 20px;
  text-align: left;
}
.LasterTraing {
  text-align: center;
  margin-top: 20px;
  position: relative;
}
.active {
  z-index: 50;
}

.el-dialog {
  width: 1179px;
}
</style>
<style>
</style>